<!--
 @Author: libing/makeup1122
 @Email: makeup1123@163.com
 @Date: "2020-04-09 23:03:42"
-->
<template>
  <sl-vue-tree :value="value" class="pa-4" ref="slvuetree" @input="inputHandle">
    <template slot="title" slot-scope="{ node }">
      <span class="title">{{node.title}}</span>
      <v-icon dark class="ml-2" small v-if="editMode">open_with</v-icon>
      <v-container class="ml-5 pl-5" v-show="editMode && node.data.isEdit">
        <v-row dense no-gutters>
          <v-col>
          <v-text-field dark dense hidden-details label="标题" :value="node.title"  @input="nodeUpdateTitleHandle($event, node)"></v-text-field>
          </v-col>
          <v-col cols="12">
          <v-text-field dark dense hidden-details label="内容" :value="node.data.data" @input="nodeUpdateHandle(node, { data: $event })"></v-text-field>
          </v-col>
          <v-col>
          <v-btn small text color="warning" @click="nodeDeleteHandle(node)"><v-icon>delete</v-icon>删除</v-btn>
          <v-btn small text dark class="mx-3" @click="nodeUpdateHandle(node, { isEdit: !node.data.isEdit})"><v-icon>keyboard_arrow_up</v-icon>收起</v-btn>
          </v-col>
        </v-row>
      </v-container>
    </template>
    <template slot="sidebar" slot-scope="{ node }">
      <span class="subtitle-1">{{node.data.typeText}}</span>
      <v-btn dark v-if="editMode" @click="nodeUpdateHandle(node, { isEdit: !node.data.isEdit})" icon><v-icon small>edit</v-icon></v-btn>
    </template>
    <template slot="toggle" slot-scope="{ node }">
      <template v-if="!node.isLeaf && node.children.length > 0">
        <v-icon dark>{{ node.isExpanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}}</v-icon>
      </template>
      <template v-else>
        <v-icon></v-icon>
      </template>
    </template>
  </sl-vue-tree>
</template>
<script>
import SlVueTree from 'sl-vue-tree'
// import 'sl-vue-tree/dist/sl-vue-tree-minimal.css'
import 'sl-vue-tree/dist/sl-vue-tree-dark.css'
export default {
  name: 'NavMenuTree',
  components: { SlVueTree },
  props: {
    mode: {
      type: String,
      default: 'show'
    },
    value: {
      type: Array,
      default: () => { return [] }
    }
  },
  data: function () {
    return {
      nodes: this.value
    }
  },
  computed: {
    editMode: function() {
      return this.mode === 'edit'
    }
  },
  created: function () {
  },
  methods: {
    inputHandle(nodes) {
      this.$emit('input', nodes)
    },
    nodeUpdateHandle(node, data) {
      const d = Object.assign({}, node.data, data)
      this.$refs.slvuetree.updateNode(node.path, {
        data: d
      })
    },
    nodeUpdateTitleHandle(event, node) {
      this.$refs.slvuetree.updateNode(node.path, { title: event })
    },
    nodeDeleteHandle(node) {
      const paths = this.$refs.slvuetree.getSelected().map(node => node.path)
      this.$refs.slvuetree.remove(paths)
    }
  }
}
</script>
<style>
/* .sl-vue-tree .sl-vue-tree-nodes-list{
  margin-left: 25px;
} */
/* .sl-vue-tree-node-item {
  border: 1px solid grey;
  padding: 8px;
  margin: 10px 0px;
  padding: 0px 10px;
} */
</style>
